<!-- 库位管理编辑和新增页面 -->
<template>
  <div>
    <el-card>
      <el-form ref="fromRef" :inline="true" :rules="fromRules" :model="formInline" class="demo-form-inline">
        <el-form-item label="库区" prop="warehouseId">
          <el-cascader ref="area" v-model="formInline.warehouseId" filterable :options="option" :props="props" @change="handleChange" />
        </el-form-item>
        <el-form-item label="库位编号" prop="code">
          <el-input v-model="formInline.code" disabled placeholder="请输入" />
        </el-form-item>
        <el-form-item label="库位名称" prop="name">
          <el-input v-model="formInline.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="温度类型" prop="temperatureType">
          <el-select v-model="formInline.temperatureType" placeholder="请选择">
            <el-option label="常温" value="CW" />
            <el-option label="恒温" value="HW" />
            <el-option label="冷藏" value="LC" />
          </el-select>
        </el-form-item>
        <el-form-item label="承重类型" prop="bearingType">
          <el-select v-model="formInline.bearingType" placeholder="请选择">
            <el-option label="重型" value="ZX" />
            <el-option label="中型" value="BX" />
            <el-option label="轻型" value="QX" />
          </el-select>
        </el-form-item>
        <el-form-item label="用途属性" prop="useType">
          <el-select v-model="formInline.useType" placeholder="请选择">
            <el-option label="入库缓存区" value="RKHCQ" />
            <el-option label="出库缓存区" value="CKHCQ" />
            <el-option label="存储区" value="CCQ" />
            <el-option label="分拣区" value="FJQ" />
            <el-option label="质检区" value="ZJQ" />
          </el-select>
        </el-form-item>
        <el-form-item prop="status" label="仓库状态" placeholder="请选择" class="radio">
          <el-radio v-model.number="formInline.status" label="1">启用</el-radio>
          <el-radio v-model.number="formInline.status" label="0">停用</el-radio>
        </el-form-item>
        <el-form-item label="承载体积" prop="maxVolume">
          <el-input v-model.number="formInline.maxVolume" placeholder="请输入">
            <span slot="suffix" style="display:inline-block;backgroundColor:#e7dfdf;width:40px;height:40px;margin-right:-4px;">m³</span>
          </el-input>
        </el-form-item>
        <el-form-item label="承载上限">
          <el-input v-model.number="formInline.maxNum" type="number" placeholder="请输入">
            <span slot="suffix" style="display:inline-block;backgroundColor:#e7dfdf;width:40px;height:40px;margin-right:-4px;">个</span>
          </el-input>
        </el-form-item>
        <el-form-item label="承载重量" class="lang">
          <el-input v-model.number="formInline.maxWeight" placeholder="请输入">
            <span slot="suffix" style="display:inline-block;backgroundColor:#e7dfdf;width:40px;height:40px;margin-right:-4px;">Kg</span>
          </el-input>
        </el-form-item>
        <el-form-item label="库位排/列/层" class="short">
          <el-input v-model.number="formInline.locationRow" placeholder="请输入" />
        </el-form-item>
        <el-form-item class="short bot">
          <el-input v-model.number="formInline.locationColumn" placeholder="请输入" />
        </el-form-item>
        <el-form-item class="short bot">
          <el-input v-model.number="formInline.locationLayer" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="库位长/宽/高" class="short">
          <el-input v-model.number="formInline.locationLength" placeholder="请输入">
            <span slot="suffix" style="display:inline-block;backgroundColor:#e7dfdf;width:40px;height:40px;margin-right:-4px;">cm</span>
          </el-input>
        </el-form-item>
        <el-form-item class="short bot">
          <el-input v-model.number="formInline.locationWidth" placeholder="请输入">
            <span slot="suffix" style="display:inline-block;backgroundColor:#e7dfdf;width:40px;height:40px;margin-right:-4px;">cm</span>
          </el-input>
        </el-form-item>
        <el-form-item class="short bot">
          <el-input v-model.number="formInline.locationHigh" placeholder="请输入">
            <span slot="suffix" style="display:inline-block;backgroundColor:#e7dfdf;width:40px;height:40px;margin-right:-4px;">cm</span>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="$router.go(-1)">返回</el-button>
          <el-button type="primary" @click="submit">提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import { addLocation, getNextCode, getAreaList, mondifyLocation, getLocationById, getWareHouseList } from '@/api'
export default {
  data() {
    return {
      option: [],
      ids: [],
      children: [],
      status: {
        0: '停用',
        1: '启用'
      },
      nameList: [],
      formInline: {
        areaId: '',
        code: '',
        warehouseId: '',
        name: '',
        temperatureType: '',
        bearingType: '',
        useType: '',
        maxVolume: '',
        status: '1',
        maxNum: '',
        maxWeight: '',
        locationRow: '',
        locationColumn: '',
        locationLayer: '',
        locationLength: '',
        locationWidth: '',
        locationHigh: ''
      },
      fromRules: {
        code: [{ required: true, message: '此项为必填项', trigger: 'blur' }],
        name: [{ required: true, message: '此项为必填项', trigger: 'blur' }],
        warehouseId: [{ required: true, message: '此项为必填项', trigger: 'blur' }],
        temperatureType: [{ required: true, message: '此项为必填项', trigger: 'blur' }],
        bearingType: [{ required: true, message: '此项为必填项', trigger: 'blur' }],
        status: [{ required: true, message: '此项为必填项', trigger: 'blur' }],
        useType: [{ required: true, message: '此项为必填项', trigger: 'blur' }],
        maxVolume: [{ required: true, message: '此项为必填项', trigger: 'blur' }]
      },
      props: {
        // checkStrictly: true,
        lazy: true,
        lazyLoad: this.lazyLoad
      }
    }
  },
  async created() {
    // 判断是编辑还是新增
    if (this.$route.query.id) {
      this.$route.meta.title = '编辑仓库'
      const { data } = await getLocationById(this.$route.query.id)
      this.formInline = data
      this.formInline.status = data.status + ''
      this.option = [{
        label: data.name,
        value: data.warehouseId
      }]
    } else {
      const { data } = await getNextCode('KW')
      this.formInline.code = data
      const res = await getAreaList({ status: 1 })
      // console.log(res)
      this.nameList = res.data
    }
  },
  methods: {
    // 级联选择器 选择时触发的事件
    handleChange(val) {
      this.formInline.warehouseId = val[1]
      this.formInline.areaId = val[0]
    },
    // 级联选择器初始化函数
    lazyLoad(node, resolve) {
      this.getData(node, resolve)
    },
    // 级联选择器获取数据
    async getData(node, resolve) {
      const level = node.level
      if (!node.data) {
        const res = await getWareHouseList() // 接口
        let nodes = Array.from(res.data).map(item => ({
          value: item.id,
          label: `${item.name}`,
          leaf: level >= 1
        }))
        if (this.option.length !== 0) {
          console.log(nodes)
          console.log(nodes.filter(item => item.value === this.option[0].value))
          nodes = nodes.filter(item => item.value === this.option[0].value)
          nodes.level = nodes.level >= 2
        }
        // console.log('1', nodes)
        // 通过调用resolve将子节点数据返回，通知组件数据加载完成
        resolve(nodes)
      } else {
        const res2 = await getAreaList({ warehouseId: node.value })
        const nodes = Array.from(res2.data).map(item => ({
          value: item.id,
          label: `${item.name}`,
          leaf: level >= 1
        }))
        // console.log('2', nodes)
        // 通过调用resolve将子节点数据返回，通知组件数据加载完成
        resolve(nodes)
      }
    },
    submit() {
      this.$refs.fromRef.validate(async valid => {
        if (!valid) return
        if (!this.$route.query.id) {
          await addLocation(this.formInline)
          this.$message.success('新增库位成功')
        } else {
          await mondifyLocation(this.formInline)
          this.$message.success('编辑库位成功')
        }
      })
      // this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-form.demo-form-inline.el-form--inline{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.el-form-item {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: flex-start;
  justify-items: center;
  width: 360px;
  margin-left: 30px;
  & .el-cascader{
    width: 360px;
  }
  &.radio{
    width: 600px;
  }
  &.lang{
    margin-right: 200px;
  }
  &.short{
    width: 225px;
    &.bot{
      margin-top: 40px;
    }
  }
  &:last-child{
    width: 100%;
    ::v-deep  .el-form-item__content{
      display: flex;
      justify-content: center;
      align-content: center;
    }
  }
::v-deep .el-form-item__content{
  flex: 1;
  width: 100%;
  .el-select{
    width: 100%;
  }
  .el-input__inner{
    background-color: #f8f5f5;
  }
  .el-button{
    width: 170px;
    height: 40px;
    padding:1px 15px;
    margin: 16px;
    color: #000;
    border-radius: 20px;
  }
}
}
</style>
